<template>
	<view class="">
		<view class="container" style="left: 0; z-index: -1; position: absolute;width: 1000rpx;">
			
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<view class="flex   text-white  text-center" style="font-size: 85rpx; width: 100%; ">
					<view class="flex " @click="returnBack()">
						<u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
					</view>
					<view class="flex-1 font-weight-bold">
						<text style="font-family:times;">Result</text>
					</view>
				</view>
		<view class="px-2" >
			<view class="flex bg-white rounded-lg my-2 align-center justify-between shadow">
				<view class="flex flex-1 flex-column align-center p-2"> 
					<image :src="avatar" mode="" class="rounded-circle shadow " style="width: 100rpx;height: 100rpx;"></image>
					<text class="font text-light-muted">{{name}}</text>
				</view>
				<view class="p-2 flex-4" style="border-left: #FF2C02 solid 8rpx; font-family: 楷体;">
					会当凌绝顶，一览众山小
				</view>
			</view>
			<view class="shadow my-4 rounded-lg bg-white">
				<view class="flex rounded-lg-top justify-center align-center p-2 font " style="background-image: linear-gradient(120deg,#00aaff,#5555ff);">
					<text class="text-white">	答题情况</text>
				
				</view>
				<scroll-view  class="" scroll-x="true" style="white-space: nowrap;">
					<view v-for="(item,index) in dati_state" :key="index" class="scroll-row-item p-3">
					
						<view class="" v-if="item==='对'">
							<view class="  rounded-circle correct font flex justify-center align-center mx-1" style="width: 60rpx;height: 60rpx;">
								√
							</view>
						</view>
						<view class="" v-else>
							<view class="  rounded-circle error font flex justify-center align-center mx-1" style="width: 60rpx;height: 60rpx;">
								X
							</view>
						</view>
						 
						  
					</view>
				</scroll-view>
			
			</view>
			<view class="rounded-lg shadow" style="background-color: #FFFFFF;">
				<view class="flex flex-column">
					<view class="flex justify-center p-2">
						<text class="font-lg font-weight-bold">{{title}}</text>
					</view>
					<view class="flex justify-center p-4">
						<text class="text-score font-lg font-weight-bold" style="transform: scale(3);">{{score}}</text>
					</view>
					<view class="flex justify-center p-2">
						<text class="text-light-muted font-sm">共{{totalCount}}题，满分{{totalScore}}分</text>
					</view>
					<view class="p-2 bg-light-muted rounded-lg-bottom">
						<view class="flex justify-between ">
							<view class="flex-1">
								<view class="flex flex-column align-center">
									<text class="text-select font">{{usedtime}}</text>
									<text class="text-light-muted font-sm">用时</text>
								</view>
							</view>
							<view class="flex-1">
								<view class="flex flex-column align-center">
									<text class="text-correct font-weight-bold font">{{correctCount}}</text>
									<text class="font-sm text-light-muted">答对</text>
								</view>
							</view>
							<view class="flex-1">
								<view class="flex flex-column align-center">
									<text class="text-error font-weight-bold font">{{errorCount}}</text>
									<text class="text-light-muted font-sm">答错</text>
								</view>
							</view>
							<view class="flex-1">
								<view class="flex flex-column align-center">
									<text class="text-info font">{{defeatPer}}%</text>
									<text class="text-light-muted font-sm">击败</text>
								</view>
							</view>
						
						</view>
					</view>
					
				</view>
				
			</view>
		
				
				
		
			
			<view class="flex flex-column mt-3">
				<view class="shadow-bottom text-center  p-2 my-2 rounded-lg font text-white " @click="reAnswer"  style="background-image: linear-gradient(120deg,#ff5500,#ffaa00);">
					再答一次
				</view>
				<view class="shadow text-center  p-2 rounded-lg   text-white font bg-blue-gradient" @click="returnBack()">
					返回主页
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'最终分数',
				correctCount:0,
				totalCount:0,
				totalScore:0,
				score:0,
				errorCount:0,
				allData:[],//存储所有的题和结果,
				time:0,
				correct_ti:[],
				error_ti:[],
				dati_state:[],
				avatar:'',
				name:''
			}
		},
		computed:{
			defeatPer()
			{ 
				return 0
			},
			usedtime()
			{
				let hour=Math.floor(this.time/3600)
				let min=Math.floor((this.time%3600)/60)
				let sec=Math.floor((this.time%3600)%60)
							
				let res=(hour<10?'0'+hour:hour)+':'+(min<10?'0'+min:min)+':'+(sec<10?'0'+sec:sec)
				return res
			}
		},
		async onLoad(e) { 
			uni.showNavigationBarLoading()
			this.openid = uni.getStorageSync('openid');
			this.avatar = uni.getStorageSync('avatar');
			this.name = uni.getStorageSync('name');
			
						
			let params=JSON.parse(decodeURIComponent(e.params))
			this.allData=JSON.parse(decodeURIComponent(params.topics))
			// console.log(params.time)
			this.time=params.time 
			// console.log(this.time)
			console.log(this.allData)
			this.totalCount=this.allData.length
			this.allData.forEach(x=>{
				// console.log(x.answer)
				// console.log(x.state)
				this.totalScore+=x.score
				let error=false
				for(let i=0;i<x.answer.length;i++)
				{
					if(x.state[x.answer[i]]!=true)
					{
						error=true
						this.error_ti.push(x._id)
						this.dati_state.push('错')
						break
					}
				}
				if(!error)
				{
					this.correct_ti.push(x._id)
					this.dati_state.push('对')
					this.correctCount+=1
					this.score+=x.score
				}
				 
		})
		this.errorCount=this.totalCount-this.correctCount
		// let res=await this.$c.getUser(uni.getStorageSync('openid'))
		// let error_ti=res.result.data.error_ti
		
		// console.log(this.error_ti)
		let res1=await this.$c.upTi(this.correct_ti,'正确')
		console.log(res1)
		let res2=await this.$c.upTi(this.error_ti,'错误') 
		console.log(res2) 
		// console.log(this.correct_ti)
		// console.log(this.error_ti) 
		// console.log(this.dati_state)
		uni.hideNavigationBarLoading()
		},
		methods: { 
			reAnswer()
			{
				uni.reLaunch({
					url:"../Topics/Topics"
				})
			},
			returnBack()
			{
				
				uni.reLaunch({
					url:"../../../pages/index/index"
				})
				
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}
	.container {
		
		background-image: linear-gradient(120deg,#ff0000,#ff5500);
		background-size: 100% 100%; 
		/* background-size: contain; */
		/* width: 100%; */
		min-height: 100%;
		background-repeat: no-repeat;
		/* position: absolute; */
		
	}
	.correct{
		color: #007AFF;
		background-color: rgba(0, 170, 255, 0.2);
		border: #00aaff solid 1rpx;
	}
	.error{
		color: #FF0000;
		background-color: rgba(255, 0, 0, 0.2);
		border: #FF2C02 solid 1rpx;
	}
.text-score{
	color: #007BFF;
}
.text-correct{
	color: #4CD964;
}
.text-error{
	color: #ff2c02;
}
</style>
